<template>
  <div class="execution">
    <basic-container>
      <avue-crud
        ref="crud"
        :page.sync="page"
        :data="tableData"
        v-model="form"
        :permission="permissionList"
        :table-loading="tableLoading"
        :option="tableOption"
        @on-load="getList"
        @search-change="searchChange"
        @refresh-change="refreshChange"
        @size-change="sizeChange"
        @current-change="currentChange"
        @row-update="handleUpdate"
        @row-save="handleSave"
        @row-del="rowDel"
        :before-open="handleOpenBefore">
        <template slot="menu" scope="scope" slot-scope="scope">
          <el-button
            type="text"
            v-if="permissions.river_report_fill"
            size="small"
            icon="el-icon-plus"
            @click="handleFillForm(scope.row)"
            >填写申报
          </el-button>
          <el-button
            type="text"
            v-if="permissions.river_report_audit"
            size="small"
            icon="el-icon-plus"
            @click="handleForm(scope.row)"
            >评阅申报
          </el-button>
          <el-button
            v-if="permissions.river_expert_score"
            type="text"
            size="small"
            icon="el-icon-view"
            @click="viewScore(scope.row)"
            >查看评分
          </el-button>
        </template>
        <template slot="cityIdForm" slot-scope="scope">
          <avue-input-tree
            v-model="form.cityId"
            :disabled="isViewing"
            placeholder="请选择城市"
            :node-click="getNodeData"
            :dic="treeCityData"></avue-input-tree>
        </template>
        <template slot="countyIdForm" slot-scope="scope">
          <avue-input-tree
            :disabled="isViewing"
            v-model="form.countyId"
            placeholder="请选择区县"
            :dic="treeCountyData"></avue-input-tree>
        </template>
      </avue-crud>

      <el-dialog v-dialogDrag @closed="dialogClosed" :visible.sync="visible" top="5vh" width="60%">
        <el-empty description="暂无数据" v-if="allIndexScoresList.length == 0"></el-empty>
        <el-tabs type="border-card" v-else v-model="activeName" @tab-click="handleClick">
          <el-tab-pane label="指标评分" name="first">
            <el-table stripe :data="allIndexScoresList" border style="width: 100%">
              <el-table-column prop="indexName" label="指标名称" width="180"> </el-table-column>
              <el-table-column prop="selfScore" label="自评分" width="180"> </el-table-column>
              <el-table-column prop="systemScore" label="专家评分"> </el-table-column>
            </el-table>
          </el-tab-pane>
          <el-tab-pane label="雷达图" name="second">
            <div id="echart"></div>
            <el-table stripe border :data="tableData2" style="width: 100%">
              <el-table-column prop="index_name" label="指标"> </el-table-column>
              <el-table-column prop="self_score" label="自评分" width="250"> </el-table-column>
              <el-table-column prop="system_score" label="专家评分" width="250"> </el-table-column>
            </el-table>
          </el-tab-pane>
        </el-tabs>
      </el-dialog>
    </basic-container>
  </div>
</template>

<script>
import { fetchList, addObj, putObj, delObj, getAllIndexScores } from "@/api/river"
import { tableOption } from "@/const/crud/river"
import { mapGetters } from "vuex"
import { calculateTotalScore, getMaxScore } from "@/api/score"
import { getSelectList } from "@/api/sysregion"
import { JIANG_SU } from "@/util/constants"
// import echarts from "echarts"

export default {
  name: "river",
  data() {
    return {
      treeCityData: [],
      treeCountyData: [],
      isViewing: false,
      form: {
        cityId: null,
        countyId: null,
      },
      activeName: "first",
      searchForm: {},
      tableData: [],
      visible: false,
      allIndexScoresList: [],
      page: {
        total: 0, // 总页数
        currentPage: 1, // 当前页数
        pageSize: 20, // 每页显示多少条
      },
      tableLoading: false,
      tableOption: tableOption,
      selectRiverId: null,
      selectLevel: null,
      tableData2: [],
    }
  },
  computed: {
    ...mapGetters(["permissions"]),
    permissionList() {
      return {
        addBtn: this.vaildData(this.permissions.river_river_add, false),
        delBtn: this.vaildData(this.permissions.river_river_del, false),
        editBtn: this.vaildData(this.permissions.river_river_edit, false),
      }
    },
  },
  mounted() {},
  methods: {
    getNodeData(data) {
      this.form.countyId = null
      this.getTreeCountyData(data.value)
    },
    getTreeCountyData(cityId) {
      getSelectList(cityId).then((res) => {
        this.treeCountyData = res.data.data
      })
    },
    handleOpenBefore(show, type) {
      window.boxType = type
      if (type === "view") {
        this.isViewing = true
        getSelectList(JIANG_SU).then((res) => {
          this.treeCityData = res.data.data
          this.getTreeCountyData(this.form.cityId)
        })
      } else {
        this.isViewing = false
        getSelectList(JIANG_SU).then((res) => {
          this.treeCityData = res.data.data
          let cityId = this.$store.getters.userInfo.cityId
          if (cityId != -1) {
            this.cityDisabled = true
            this.form.cityId = cityId
            this.getTreeCountyData(cityId)
          }
        })
      }
      show()
    },
    getLoadEcharts(list, maxScore) {
      let data1 = []
      let data2 = []
      list.forEach((item) => {
        data1.push(item.self_score)
        data2.push(item.system_score)
      })

      var myChart = echarts.init(document.getElementById("echart"))
      var colorList = ["#56A3F1", "#FF917C"]
      var option = {
        color: colorList,
        title: {
          text: "自评分和专家评分雷达图",
        },
        tooltip: {
          confine: true,
          enterable: true, //鼠标是否可以移动到tooltip区域内
        },
        legend: {
          data: ["自评分", "专家评分"],
        },
        radar: {
          indicator: maxScore,
          name: {
            color: "#fff",
            backgroundColor: "#666",
            borderRadius: 3,
            padding: [3, 5],
          },
        },
        series: [
          {
            type: "radar",
            tooltip: {
              trigger: "item",
            },
            data: [
              {
                value: data1,
                name: "自评分",
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value
                  },
                },
                symbol: "rect",
                symbolSize: 12,
                lineStyle: {
                  type: "dashed",
                },
              },
              {
                value: data2,
                name: "专家评分",
                label: {
                  show: true,
                  formatter: function (params) {
                    return params.value
                  },
                },
                areaStyle: {
                  color: new echarts.graphic.RadialGradient(0.1, 0.6, 1, [
                    {
                      color: "rgba(255, 145, 124, 0.1)",
                      offset: 0,
                    },
                    {
                      color: "rgba(255, 145, 124, 0.9)",
                      offset: 1,
                    },
                  ]),
                },
              },
            ],
          },
        ],
      }
      myChart.setOption(option)
    },
    handleClick() {
      if (this.activeName === "second") {
        Promise.all([calculateTotalScore(this.selectRiverId), getMaxScore(this.selectLevel)]).then((res) => {
          this.$nextTick(() => {
            let list = res[0].data.data
            let maxScore = res[1].data.data

            let set = new Set()
            list.forEach((li) => {
              set.add(li.index_name)
            })

            maxScore.forEach((m) => {
              if (!set.has(m.name)) {
                list.push({
                  index_name: m.name,
                  self_score: 0,
                  system_score: 0,
                })
              }
            })

            this.tableData2 = list

            this.getLoadEcharts(list, maxScore)
          })
        })
      }
    },
    dialogClosed() {
      this.activeName = "first"
    },
    getList(page, params) {
      this.tableLoading = true
      fetchList(
        Object.assign(
          {
            current: page.currentPage,
            size: page.pageSize,
          },
          params,
          this.searchForm
        )
      )
        .then((response) => {
          this.tableData = response.data.data.records
          this.page.total = response.data.data.total
          this.tableLoading = false

          this.$nextTick(() => {
            this.$refs.crud.dicInit("cascader")
          })
        })
        .catch(() => {
          this.tableLoading = false
        })
    },
    rowDel: function (row, index) {
      this.$confirm("是否确认删除ID为" + row.id, "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      })
        .then(function () {
          return delObj(row.id)
        })
        .then((data) => {
          this.$message.success("删除成功")
          this.getList(this.page)
        })
    },
    handleUpdate: function (row, index, done, loading) {
      putObj(row)
        .then((data) => {
          this.$message.success("修改成功")
          done()
          this.getList(this.page)
        })
        .catch(() => {
          loading()
        })
    },
    handleSave: function (row, done, loading) {
      addObj(row)
        .then((data) => {
          this.$message.success("添加成功")
          done()
          this.getList(this.page)
        })
        .catch(() => {
          loading()
        })
    },
    sizeChange(pageSize) {
      this.page.pageSize = pageSize
    },
    currentChange(current) {
      this.page.currentPage = current
    },
    searchChange(form, done) {
      this.searchForm = form
      this.page.currentPage = 1
      this.getList(this.page, form)
      done()
    },
    refreshChange() {
      this.getList(this.page)
    },
    handleFillForm(row) {
      this.$router.push({
        // 点击打开新页面
        path: "/river/river/treePage",
        query: {
          riverId: row.id,
          audit: 0,
        },
      })
    },
    handleForm(row) {
      this.$router.push({
        // 点击打开新页面
        path: "/river/river/treePage",
        query: {
          riverId: row.id,
          audit: 1,
        },
      })
    },

    //查看所有指标分数
    viewScore(row) {
      getAllIndexScores(row.id).then((res) => {
        let list = res.data.data
        if (list != null) {
          this.allIndexScoresList = list
        }
        this.selectRiverId = row.id
        this.selectLevel = row.level
        this.visible = true
      })
    },
  },
}
</script>

<style lang="scss">
#echart {
  width: 800px;
  height: 500px;
}
</style>
